﻿#parse("partials/headerpopup.html")
<script type="text/javascript">
    $(document).ready(function () {
        ///Search Area
        var oTableArea = $('#datalistarea').dataTable({
            "bSort": false,
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "bFilter": false,
            "sAjaxSource": "tablelistarea",
            "aoColumns": [
                            { "mDataProp": "AreaId" },
                            { "mDataProp": "AreaCode" },
                            { "mDataProp": "AreaName" },
                            { "mDataProp": "CityName" },
                            { "mDataProp": "ProvinceName" }

                        ],
            "aoColumnDefs": [
                                {
                                    "fnRender": function (o) {
                                        return "<center><a class='SelectedArea' title='Select Area' href='javascript:void(0)' AreaId='" + o.aData['AreaId'] + "' AreaName='" + o.aData['AreaName'] + "' CityId='" + o.aData['CityId'] + "' CityName='" + o.aData['CityName'] + "' CountryId='" + o.aData['CountryId'] + "' CountryName='" + o.aData['CountryName'] + "' ProvinceId='" + o.aData['ProvinceId'] + "' ProvinceName='" + o.aData['ProvinceName'] + "' ><img src='/images/Icons/table.png'/></a> </center>";
                                    },
                                    "aTargets": [0]
                                }
                        ],
            "fnServerData": function (sSource, aoData, fnCallback) {
                aoData.push({ "name": "DialogTextBoxArea", "value": $('#DialogTextBoxArea').val() });
                aoData.push({ "name": "DialogTextBoxCity", "value": $('#DialogTextBoxCity').val() });
                aoData.push({ "name": "DialogTextBoxProvince", "value": $('#DialogTextBoxProvince').val() });
                aoData.push({ "name": "PresentAddressCountryId", "value": $('#PresentAddressCountryId').val() });
                jQuery.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "tablelistarea",
                    "data": aoData,
                    "success": fnCallback
                });
            }
        });

        function checkForEnterArea(event) {
            if (event.keyCode == 13) {
                oTableArea.fnDraw();
            }
        }
        $('#DialogTextBoxArea').keypress(checkForEnterArea);
        $('#DialogTextBoxCity').keypress(checkForEnterArea);
        $('#DialogTextBoxProvince').keypress(checkForEnterArea);
        $('#DialogBtnSearchArea').click(function () { oTableArea.fnDraw(); });

        //Add event click on list Area
        var Address =
    $(".SelectedArea").live('click', function (event) {
        var AreaId = $(this).attr("AreaId");
        var AreaName = $(this).attr("AreaName");
        var CityId = $(this).attr("CityId");
        var CityName = $(this).attr("CityName");
        var CountryId = $(this).attr("CountryId");
        var CountryName = $(this).attr("CountryName");
        var ProvinceId = $(this).attr("ProvinceId");
        var ProvinceName = $(this).attr("ProvinceName");
        parent.setAreaTextBox(AreaId, AreaName, CityId, CityName, CountryId, CountryName, ProvinceId, ProvinceName);


    });
    });
</script>
<style>
    div#datalistarea_filter
    {
        display: none;
    }
    div#datalistarea_length
    {
        display: none;
    }
    .mws-table thead
    {
        margin-top: -10px;
    }
</style>
<div class="mws-form" action="#">
    <div class="mws-form-inline">
        <div class="mws-form-row">
            <label>
                Country</label>
            <div class="mws-form-item small">
                $DdPresentCountry
            </div>
        </div>
        <div class="mws-form-row">
            <label>
                Area</label>
            <div class="mws-form-item small">
                <input id="DialogTextBoxArea" type="text" value="" class="mws-textinput" />
            </div>
        </div>
        <div class="mws-form-row">
            <label>
                City</label>
            <div class="mws-form-item small">
                <input id="DialogTextBoxCity" type="text" value="" class="mws-textinput" />
            </div>
        </div>
        <div class="mws-form-row">
            <label>
                Province</label>
            <div class="mws-form-item small">
                <input id="DialogTextBoxProvince" type="text" value="" class="mws-textinput" />
            </div>
        </div>
    </div>
    <div class="mws-button-row">
        <input id="DialogBtnSearchArea" class="mws-button red" type="submit" value="Search" />
    </div>
    <div class="mws-form-row" style="padding-top: 10px">
        <table cellpadding="0" cellspacing="0" border="0" class="fullwidth mws-table" id="datalistarea"
            width="80%">
            <thead>
                <tr>
                    <th style="width: 10px; text-align: center">
                        Actions
                    </th>
                    <th style="width: 20px; text-align: center">
                        Code
                    </th>
                    <th style="text-align: center">
                        Area
                    </th>
                    <th style="text-align: center">
                        City
                    </th>
                    <th style="width: 200px; text-align: center">
                        Province
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="7" class="dataTables_empty">
                        <!-- <img src="${rooturl}Images/Custom/252.gif" />-->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
#parse("partials/footerpopup.html")